<template>
  <div class="tab-container">
    <h4>功能：多级表头，自动合并行，可编辑，实时校验，文件上传</h4>
    <div class="optionItem">
      <a-form class="advanced-form" :form="form" v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="24">
            <div class="btnList">
              <a-button type="primary" @click="handleAdd">新增</a-button>
              <a-button type="primary" @click="handleSave">提交</a-button>
              <a-button type="primary" @click="handleDel">删除</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-wrapper">
      <flex-table ref="flexTable1" :columns="columns" :dataSource="dataSource" :flag="1"></flex-table>
    </div>
  </div>
</template>

<script>
import flexTable from "@/components/table/editFlexTable";
import { tabCloumns,mergeCell } from "./index";
export default {
  data(){
    return{
      isCheckAll:true,
      dataSource:[],
      form:{},
      formLayout:{
        labelCol:{span:6},
        wrapperCol:{span:14}
      },
      columns: tabCloumns,
    }
  },
  components:{
    flexTable,
  },
  mounted(){
    this.dataSource = [
      {
        key:'111',
        materId:'111',
        checked:false,
        wlbm: '1111',
        hxcgjmc: '16',
        tjpp:'',
        tjgf:'',
        sl:'',
        dw:'',
        jscsjxhgg:'',
        yffj:[],
        tbr:'',
        gys:'供应商1'
      },
      {
        key:'222',
        materId:'111',
        checked:false,
        wlbm: 'Edward King 0',
        hxcgjmc: 16,
        gys:'供应商2'
      },
      {
        key:'333',
        materId:'133311',
        checked:false,
        wlbm: 'Edward King 3',
        hxcgjmc: 16,
        gys:'供应商3'
      },
    ]
    mergeCell(this.dataSource,['materId'])
  },
  methods:{
    // 批量提交保存数据
    handleSave() {
      let arr1 = this.dataSource.filter(item=>{
        return item.checked
      })
      let rows1 = [];
      if(arr1.length){
        rows1 = arr1
      }else{
        let newData1 = [...this.dataSource];
        rows1 = newData1.filter(row => {
          return row.editable;
        });
      }
      let i = 1;
      rows1.map(item=>{
        if(!item.hxcgjmc || !item.sl || !item.dw || !item.jscsjxhgg || !item.tbr){
          i = 0;
        }
      })
      if(i==0){
        this.$message.error('红色框为必填项！')
      }else{
        rows1 = rows1.map(item1=>{
          item1.editable = false;
          return item1;
        })
        this.$refs.flexTable1.isCheckAll = false;
        this.$refs.flexTable1.onCheckAllChange();
      }
    },
    // 点击新增
    handleAdd() {
      if(this.$refs.flexTable1.searchText){
        this.$message.error('请先清空搜索条件，在进行新增!')
        return false;
      }
      this.dataSource.push({
        editable:true,
        checked:false,
        materialCode: '',
        hxcgjmc: '',
        tjpp:'',
        tjgf:'',
        sl:'',
        dw:'',
        jscsjxhgg:'',
        yffj:[],
        tbr:'',
        hxcgjmcError:true,
        slError:true,
        dwError:true,
        jscsjxhggError:true,
        tbrError:true,
      })
      mergeCell(this.dataSource,['materId'])
    },
    //删除
    handleDel(){
      let arr1 = this.dataSource.filter(item=>{
        return item.checked
      })
      if(arr1.length){
        this.dataSource = this.dataSource.filter(item1=>{
          return !item1.checked
        })
        this.$refs.flexTable1.checkAll = false;
      }else{
        this.$message.error('请至少选择一项！')
      }
    },
  },
}
</script>

<style scoped lang="less">
.tab-container{
  h4{
    margin-bottom: 20px;
  }
  .optionItem{
    .btnList{
      padding: 0 10px;
      button{
        margin-right:20px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>